/* latin */
@font-face {
	font-family: 'Inconsolata';
	font-style: normal;
	font-weight: 700;
	font-stretch: 100%;
	font-display: swap;
	src: url(../fonts/inconsata.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin */
@font-face {
	font-family: 'Dancing Script';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/dancing.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

html,body{
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	font-family: 'Roboto', sans-serif;
	scroll-behavior: smooth;
	
}

/*      navbar        */
.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 0px;
    border: none;
}
.navbar-default {
    background-color: #2d3e50;
    border: none;
    padding: 50px;
}
.navbar-default h1{
	position: absolute;
	top: 25px;
	color: #049bb6;
	left: 14%;
	font-family: 'Balsamiq Sans', cursive;
}
.navbar-default li{
	padding-left: 20px;
	font-weight: 700;
}
.navbar-default .navbar-nav>li>a {
    color: white;
}
.navbar-default .navbar-nav>li>a:hover {
    color: #049bb6;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #049bb6;
    background: none;
}
.change .bar1 {
  transform: rotate(-45deg) translate(-5px, 3px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: rotate(45deg) translate(-5px, -3px);
}

/*        About        */
.about{
	background-color: #0da3bb;
	padding-top: 40px;
	padding-bottom: 40px;
}
.about-content{
	color: white;
}
.about-content p{
	line-height: 15px;
	font-size: 18px;
}
.profile-img,.profile-content{
	padding-top: 30px;
}
.profile-content .row{
	color: white;
	border-bottom: 2px dotted white;
}
.email, .website{
	color: #040404;
}


/*      Experience          */

.experience{
	background-color: #7e8c8d;
	color: white;
	padding-top: 40px;
	padding-bottom: 40px;
}
.experience .title{
	padding-top: 30px;
	border-bottom: 1px solid;
	padding-bottom: 5px;
}
.years{
	display: flex;
	justify-content: space-between;
	color: #d8e2e4;
}
#education-center{
	color: #3e4d54;
}
.skills{
	padding-top: 30px;
}
.progress{
	height: 30px;
}
.progress-bar-1{
	background-color: #34495e;
	text-align: left;
	padding: 5px 0px 0px 5px;
}
.progress-bar-2{
	background-color: #0da3bb;
	text-align: left;
	padding: 5px 0px 0px 5px;
}
.progress-bar-3{
	background-color: #17a086;
	text-align: left;
	padding: 5px 0px 0px 5px;
}
.progress-bar-warning{
	background-color: #737e80;
}

/*           footer           */
footer{
	padding-top: 40px;
	background-color: #16a086;
	color: white;
}
footer .information{
	border-bottom: 2px dotted;
	padding-top: 10px;
	width: 90%;
}
.fa-facebook-f,.fa-twitter,.fa-linkedin-square{
	font-size: 24px;
	margin-top: 20px;
	padding: 10px;
	background-color: #2d3e50;
}
.form-control{
	width: 80%;
}
.btn-info{
	width: 80%;
	text-align: center;
	background-color:#2d3e50; 
}
.footer{
	margin-top: 100px;
	padding: 20px 20px 0px 20px;
	width: 100%;
	background-color: #2d3e50;
	display: flex;
    justify-content:space-between;
}
#back-to-top{
	padding-bottom: 5px;
	color: white;
}
.fa-arrow-up{
	color: #16a086;
}
.jumbotron{
	background:none; 
	padding-bottom: 0px;
	margin-bottom: 0px;
}



/*    media query     */
@media (max-width: 992px){
.experience{
	width: 100%;

}
.skills{
	padding-top: 100px;
}
.profile-content{
	width: 80%;
}
.form{
	padding-top: 100px;
}
.footer p{
	font-size: 10px;
}
.footer a{
	font-size: 10px;
}
}
@media only screen and (max-width: 768px) {
.experience{
	padding-right: 50px;
}
.profile-img{
	padding-left: 100px;
}
.about-content p{
	line-height: 20px;
}
}
@media only screen and (max-width: 411px) {
.profile-img{
	padding-left: 50px;
}
.profile-content .row h4{
	
	font-size: 16px;
}
}
@media only screen and (max-width: 375px) {
.profile-img{
	padding-left: 30px;
}
.footer p{
	font-size: 5px;
}
.footer a{
	font-size: 5px;
}
.profile-content .row h4{
	
	font-size: 16px;
}
}
@media only screen and (max-width: 320px) {
.profile-img{
	padding-left: 10px;
}
.profile-content .row h4{
	
	font-size: 10px;
}	
}
@media only screen and (max-width: 280px) {
.navbar-default h1{
	left: 0%;
	font-size: 30px;
}
.profile-img{
	padding-left: 0px;
}	
}
.img-circle{
	padding: 20px;
	margin-right: 20px;
	width:200px;
	height:200px;	
	margin-left: -40px;
}